<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .msg {
            text-decoration: line-through;
        }

        .pages {
            display: flex;
            list-style: none;
        }

        /* table{
            height: 142px;
        } */
        .pages li {
            width: 20px;
            height: 20px;
            text-align: center;
        }

        .active {
            background: red;
            box-shadow: 0 0 3px 0 rgb(78, 112, 134)
        }
        .mask{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.3);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dialog-box{
            width: 300px;
            height: 300px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 0 3px 3px gray;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="txt" @keydown.enter="add" placeholder="回车或按钮添加/按钮搜索">
        <button @click="search">搜索</button>
        <button @click="dialogAdd">添加</button>

        <!-- 数据列表开始 -->
        <table>
            <tr v-for="item in getList">
                <td>
                    <input type="checkbox" v-model="item.isDid">
                </td>
                <td>
                    <span :class="{msg:item.isDid}">{{item.value}}</span>
                </td>
                <td>
                    <button @click="edit(item)">编辑</button>
                </td>
                <td>
                    <button @click="handleDel(item.id)">删除</button>
                </td>
            </tr>
        </table>
        <!-- 数据列表结束 -->

        <!-- 分页开始 -->
        <ul class="pages">
            <li v-for="n in getPage" @click="changePageNum(n)" :class="{active:pageNum==n}">{{n}}</li>
        </ul>
        <!-- 分页结束 -->

        <!-- 编辑会话框开始 -->
        <mould v-show="isShowEdit">
            <template #title>
                <h2 style="text-align: center;">编辑</h2>
            </template>
            <template #main-body>
                <input v-model="editData.value" style="margin:0 0 20px 50px;" type="text"><br>
                <button @click="update" style="margin-left: 50px;">提交</button>
                <button @click="isShowEdit=false">关闭</button>
            </template>
        </mould>
        <!-- 编辑会话框结束 -->

        <!-- 添加会话框开始 -->
        <mould v-show="isShowAdd">
            <template #title>
                <h2 style="text-align: center;">添加</h2>
            </template>
            <template #main-body>
                <input ref="msg" style="margin:0 0 20px 50px;" type="text"><br>
                <button @click="addData" style="margin-left: 50px;">提交</button>
                <button @click="isShowAdd=false">关闭</button>
            </template>
        </mould>
        <!-- 添加会话框结束 -->
    </div>
    <script type="text/template" id="temp">
        <div class="mask">
            <div class="dialog-box">
                <div>
                    <slot name="title">title</slot>
                </div>
                <div>
                    <slot name="main-body">body</slot>
                </div>
            </div>
        </div>
    </script>
    <script>
        Vue.component("mould",{
            template:"#temp"
        })
        var vm = new Vue({
            el: "#app",
            data: {
                isShowAdd:false,
                isShowEdit:false,
                txt: '',
                keyword: '',
                todolist: [],
                pageSize: 5,
                pageNum: 1,
                editData:{}
            },
            computed: {
                getList() {
                    //查询
                    let list = this.todolist.filter((item, index) => {
                        var reg = new RegExp(this.keyword, "i")
                        return reg.test(item.value)
                    })

                    let startIndex = (this.pageNum - 1) * this.pageSize;
                    let endIndx = startIndex + this.pageSize;
                    return list.slice(startIndex, endIndx)
                },
                getPage() {
                    let list = this.todolist.filter((item, index) => {
                        var reg = new RegExp(this.keyword, 'i')
                        return reg.test(item.value);
                    })
                    return Math.ceil(list.length / this.pageSize)
                }
            },
            methods: {
                add() {
                    if (this.txt !== "") {
                        this.todolist.push({ value: this.txt, id: Date.now(), isDid: false });
                        this.txt = "";
                    } else {
                        alert("输入值不能为空");
                    }
                },
                handleDel(id) {
                    this.todolist.forEach((val, index) => {
                        if (val.id == id) {
                            this.todolist.splice(index, 1)
                        }
                    })
                },
                changePageNum(n) {
                    this.pageNum = n;
                },
                search() {
                    this.pageNum = 1;
                    this.keyword = this.txt;
                },
                edit(item){
                    this.isShowEdit=true;
                    this.editData = Object.assign({},item);
                },
                update(){
                    this.todolist.find((item,index)=>{
                        if(this.editData.id === item.id){
                            this.todolist.splice(index,1,this.editData)
                            return;
                        }
                    })
                    this.isShowEdit = false;
                },
                dialogAdd(){
                    this.isShowAdd=true;
                },
                addData(){
                    this.editData = {
                        value:this.$refs.msg.value,
                        id:Date.now(),
                        isDid: false
                    }
                    this.todolist.push(this.editData);
                    this.isShowAdd = false;
                }
            }
        })
    </script>
</body>

</html>